<template>
  <div id="app">
    <div>{{ this.$store.state.user.token }}</div>
    <div>{{ this.$store.state.setting.name }}</div>
    <!-- 在默认情况下, 通过this.$store全局调用了user模块中的mutations. -->
    <button @click="updateToken">点我修改token</button>

    <!-- 调用带有命名空间的模块 -->
    <!-- 方式1 -->
    <button @click="updateName1">点我修改name</button>
    <!-- 方式2 -->
    <button @click="updateName2">点我修改name</button>
    <!-- 方式3 使用createNamespacedHelpers 创建基于某个命名空间辅助函数 -->
    <button @click="updateName">点我修改name</button>
  </div>
</template>

<script>
// 方式2  通过辅助函数调用
// import { mapMutations } from 'vuex'

// 方式3 通过createNamespacedHelpers
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('setting')

export default {

  methods: {
    // 在默认情况下, 通过this.$store全局调用了user模块中的mutations.
    updateToken() {
      this.$store.commit('updateToken')
    },
    // 方式1, 调用带有命名空间的模块
    updateName1() {
      this.$store.commit('setting/updateName')
    },
    // 方式2, 通过辅助函数
    ...mapMutations(['setting/updateName']),
    updateName2() {
      this['setting/updateName']()
    },
    // 方式3, 通过局部的mapMutations
    ...mapMutations(['updateName'])
  }

}
</script>

<style>
</style>
